<template>
  <div class="yp-mall">
    <div class="yp-mall-header">
      <form class="yp-mall-header_search">
        <i class="icon"></i>
        <input type="text" placeholder="有品心动卡">
      </form>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.yp-mall {
  &-header {
    padding: 8px 12px;

    &_search {
      display: flex;
      background-color: #eee;
      width: 100%;
      height: 28px;
      line-height: 28px;
      align-items: center;
      border-radius: 2px;

      > .icon {
        display: inline-block;
        width: 13px;
        height: 13px;
        background-image: url(https://cbu01.alicdn.com/cms/upload/2017/294/133/3331492_2093810242.png);
        background-size: 13px 13px;
        margin: 0 4px;
      }

      > input {
        flex: 1;
        border: none;
        background: #eeeeee;
        font-size: 12px;
        color: rgb(204, 204, 204);
        outline: none;
      }
    }
  }
}
</style>
